<template>
  <div id="blogHome" :style="'background-size: cover;' + 'background-repeat: no-repeat;' + 'background-image: url(' + changeBgImg + ');'">
    <ul class="bh-container">
      <li class="bh-title-cn">苏豪的个人网站</li>
      <li class="bh-title-en">SuHao's Personal Website</li>
      <li class="bh-common" @click="goSubmit(1)"><a>»&nbsp;&nbsp;在线简历</a></li>
      <li class="bh-common" @click="goSubmit(2)"><a>»&nbsp;&nbsp;elem项目</a></li>
      <li class="bh-common" @click="goSubmit(3)"><a>»&nbsp;&nbsp;elem后管</a></li>
      <li class="bh-common" @click="goSubmit(4)"><a>»&nbsp;&nbsp;常用组件</a></li>
      <li class="bh-common" @click="goSubmit(5)"><a>»&nbsp;&nbsp;码云地址</a></li>
      <li class="bh-bottom">Contact&nbsp;&nbsp;|&nbsp;&nbsp;suhao755@gmail.com</li>
    </ul>
  </div>
</template>

<script>
import hoo from 'hooJSBridge/dist/HJSBridge';

export default {
  computed: {
    changeBgImg: function() {
      if (this.checkWebp()) {
        let value = Math.round(Math.random() * 100);
        return '//bree.oss-cn-beijing.aliyuncs.com/blog' + value + '.webp';
      } else {
        let value = Math.round(Math.random() * 10);
        return '//suhoo.oss-cn-shenzhen.aliyuncs.com/random/blog' + value + '.jpg';
      }
    }
  },
  mounted() {
    console.log(hoo);
  },
  methods: {
    checkWebp() {
      try {
        return (
          document
            .createElement('canvas')
            .toDataURL('image/webp')
            .indexOf('data:image/webp') === 0
        );
      } catch (err) {
        return false;
      }
    },
    goSubmit: function(index) {
      if (index === 1) {
        window.location.href = 'https://suhao.online/suhoo/resume.html';
      } else if (index === 2) {
        window.location.assign('https://suhao.online/view/home/HomeIndex');
      } else if (index === 3) {
        window.open('https://suhao.online/admin/#/shopManage/index');
      } else if (index === 4) {
        this.$router.push('/index');
      } else {
        window.open('https://gitee.com/haofang');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#blogHome {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
}

.bh-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  overflow: hidden;
  min-width: 90%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 1.5em;
  color: #fefefe;
  transition: top 1s ease;
}

.bh-title-cn {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
}

.bh-title-en {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
}

.bh-common {
  width: 96%;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
  border-radius: 0.5em;
  margin: 0.16rem auto 0;
  text-indent: 1em;
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 1px #333;
  a {
    display: block;
    cursor: pointer;
  }
}

.bh-bottom {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  text-align: right;
  padding-right: 20px;
  margin-top: 16px;
  border-top: 1px solid #eaeaea;
}
</style>
